<template>
	<view class="zcModifyMain">
		<view class="terminalBox">
			<text class="title" v-if="type == 'single'">单个设置--终端号</text>
			<view class="singleBox" v-if="type == 'single'">
				{{ singleInputValue.slice(0, -6)
        }}<text>{{ singleInputValue.slice(-6) }}</text>
			</view>
			<text class="title" v-if="type == 'multiple'">批量设置--终端号</text>
			<view class="multipleBox" v-if="type == 'multiple'">
				<view>{{ multipleInputValueStart.slice(0, -6)
          }}<text>{{ multipleInputValueStart.slice(-6) }}</text></view>
				<u-icon class="uIcon" name="arrow-downward" color="#fb4535" size="50"></u-icon>
				<view>{{ multipleInputValueEnd.slice(0, -6)
          }}<text>{{ multipleInputValueEnd.slice(-6) }}</text></view>
			</view>
		</view>
		<u-form :model="form" ref="uForm" :error-type="['toast']">
			<u-form-item label="借记卡费率(%)" label-width="300" left-icon="arrow-right-double" right-icon="edit-pen"
				prop="dcpay">
				<u-input class="r_input" :clearable="false" v-model="form.dcpay" input-align="right"
					:placeholder="placeholder.dcpay" @blur="inputBlurTap('dcpay')" />
			</u-form-item>
			<u-form-item label="借记卡封顶(元)" label-width="300" left-icon="arrow-right-double" right-icon="edit-pen"
				prop="dctop">
				<u-input class="r_input" :clearable="false" v-model="form.dctop" input-align="right"
					:placeholder="placeholder.dctop" @blur="inputBlurTap('dctop')" />
			</u-form-item>
			<u-form-item label="贷记卡费率(%)" label-width="300" left-icon="arrow-right-double" right-icon="edit-pen"
				prop="ccpay">
				<u-input class="r_input" :clearable="false" v-model="form.ccpay" input-align="right"
					:placeholder="placeholder.ccpay" @blur="inputBlurTap('ccpay')" />
			</u-form-item>
			<u-form-item label="银联商务(%)" label-width="300" left-icon="arrow-right-double" right-icon="edit-pen"
				prop="cuppay">
				<u-input class="r_input" :clearable="false" v-model="form.cuppay" input-align="right"
					:placeholder="placeholder.cuppay" @blur="inputBlurTap('cuppay')" />
			</u-form-item>
			<u-form-item label="支付宝扫码费率(%)" label-width="300" left-icon="arrow-right-double" right-icon="edit-pen"
				prop="alipay">
				<u-input class="r_input" :clearable="false" v-model="form.alipay" input-align="right"
					:placeholder="placeholder.alipay" @blur="inputBlurTap('alipay')" />
			</u-form-item>
			<u-form-item label="微信扫码费率(%)" label-width="300" left-icon="arrow-right-double" right-icon="edit-pen"
				prop="wxpay">
				<u-input class="r_input" :clearable="false" v-model="form.wxpay" input-align="right"
					:placeholder="placeholder.wxpay" @blur="inputBlurTap('wxpay')" />
			</u-form-item>
			<u-form-item label="T0手续费(元)" label-width="300" left-icon="arrow-right-double" right-icon="edit-pen"
				prop="t0">
				<u-input class="r_input" :clearable="false" v-model="form.t0" input-align="right"
					:placeholder="placeholder.t0" @blur="inputBlurTap('t0')" />
			</u-form-item>
			<u-form-item label="选择产品" label-width="300" left-icon="arrow-right-double" right-icon="arrow-right">
				<u-input @tap="productShow = true" :disabled="true" input-align="right" v-model="productValue.label"
					placeholder="请选择产品" />
			</u-form-item>
		</u-form>
		<u-button class="rButton" type="primary" :ripple="true" @tap="submitTap" :disabled="canClick">确定提交</u-button>
		<u-select v-model="productShow" confirm-color="#fb4535" :list="productList" @confirm="productConfirm">
		</u-select>
		<u-modal v-model="show" title="温馨提醒" content="您确定要设置政策吗？" @confirm="confirm" confirm-color="#fb4535"
			:show-cancel-button="true"></u-modal>
		<u-toast ref="uToast" />

	</view>
</template>
<script>
	export default {
		data() {
			return {
				//接收值
				type: "",
				// productClassCode: "",
				singleInputValue: "",
				multipleInputValueStart: "",
				multipleInputValueEnd: "",
				singlePorductValue: "",
				multiplePorductValue: "",
				//表单相关
				placeholder: {
					dcpay: "", //借记卡费率
					dctop: "", //借记卡封顶
					ccpay: "", //贷记卡费率
					cuppay: "", //银联商务
					alipay: "", //支付宝扫码费率
					wxpay: "", //微信扫码费率
					t0: "", //t0手续费
				},
				feeCfgList: [],
				form: {
					dcpay: "", //借记卡费率
					dctop: "", //借记卡封顶
					ccpay: "", //贷记卡费率
					cuppay: "", //银联商务
					alipay: "", //支付宝扫码费率
					wxpay: "", //微信扫码费率
					t0: "", //t0手续费
				},
				//操作类
				show: false,
				productList: [],
				productShow: false,
				productValue: {
					label: "",
					value: "",
				},
				//表单验证
				rules: {
					dcpay: [{
						required: true,
						message: "请填写借记卡费率",
						trigger: ["change"],
					}, ],
					dctop: [{
						required: true,
						message: "请填写借记卡封顶",
						trigger: ["change"],
					}, ],
					ccpay: [{
						required: true,
						message: "请填写贷记卡费率",
						trigger: ["change"],
					}, ],
					cuppay: [{
						required: true,
						message: "请填写银联商务",
						trigger: ["change"],
					}, ],
					alipay: [{
						required: true,
						message: "请填写支付宝扫码费率",
						trigger: ["change"],
					}, ],
					wxpay: [{
						required: true,
						message: "请填写微信扫码费率",
						trigger: ["change"],
					}, ],
					t0: [{
						required: true,
						message: "请填写t0手续费",
						trigger: ["change"],
					}, ],
				},
				canClick: true
			};
		},
		onLoad(options) {
			this.type = options.type;
			// this.productClassCode = options.productClassCode;
			this.singleInputValue = options.singleInputValue;
			this.multipleInputValueStart = options.multipleInputValueStart;
			this.multipleInputValueEnd = options.multipleInputValueEnd;
			this.singlePorductValue = options.singlePorductValue;
			this.multiplePorductValue = options.multiplePorductValue;
			this.getProductsByClassCodeTap();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			//获取分类
			getProductsByClassCodeTap() {
				let params = {};
				if (this.type == "single") {
					params.classCode = this.singlePorductValue;
				} else if (this.type == "multiple") {
					params.classCode = this.multiplePorductValue;
				}
				this.$u.api
					.getProductsByClassCode(params)
					.then((res) => {
						if (res.status == 200) {
							let datas = res.result;
							this.productList = datas;
							this.productValue = datas[0];
							this.getFeeCfgList();
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast(res.resultDesc);
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
			//获取费率项配置
			getFeeCfgList() {
				let pramas = {
					productId: this.productValue.value
				}
				this.$u.api
					.getFeeCfgList(pramas)
					.then((res) => {
						if (res.status == 200) {
							let datas = res.result;
							this.feeCfgList = datas;
							if (datas.length > 0) {
								datas.forEach((item) => {
									switch (item.code) {
										case "dcpay":
											this.placeholder.dcpay = `请输入${item.min}-${item.max}`;
											break;
										case "dctop":
											this.placeholder.dctop = `请输入${item.min}-${item.max}`;
											break;
										case "ccpay":
											this.placeholder.ccpay = `请输入${item.min}-${item.max}`;
											break;
										case "cuppay":
											this.placeholder.cuppay = `请输入${item.min}-${item.max}`;
											break;
										case "alipay":
											this.placeholder.alipay = `请输入${item.min}-${item.max}`;
											break;
										case "wxpay":
											this.placeholder.wxpay = `请输入${item.min}-${item.max}`;
											break;
										case "t0":
											this.placeholder.t0 = `请输入${item.min}-${item.max}`;
											break;
									}
								});
							}
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast(res.resultDesc);
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
			//验证最大最小
			inputBlurTap(type) {
				this.canSubmit()
				let datas = this.feeCfgList;
				if (datas.length > 0) {
					datas.forEach((item) => {
						if (item.code == type) {
							let currentValue = this.form[type];
							if (this.$u.trim(currentValue, "all") != "") {
								if (currentValue * 1000 > item.max * 1000) {
									this.$refs.uToast.show({
										title: `不能超过${item.max}`,
										type: "error",
										duration: 1200
									});
									this.form[type] = "";
									return;
								}
								if (currentValue * 1000 < item.min * 1000) {
									this.$refs.uToast.show({
										title: `不能低于${item.min}`,
										type: "error",
										duration: 1200
									});
									this.form[type] = "";
									return;
								}
							}
						}
					});
				}
			},
			// 判断是否可以提交
			canSubmit() {
				setTimeout(() => {
					if (this.form.dcpay && this.form.dctop && this.form.ccpay && this.form.cuppay && this.form
						.alipay && this.form.wxpay && this.form.t0) {
						this.canClick = false
					} else {
						this.canClick = true
					}
				})
			},
			//提交操作
			submitTap() {
				this.canSubmit()
				setTimeout(() => {
					if (this.canClick == false) {
						this.$refs.uForm.validate((valid) => {
							if (valid) {
								this.show = true;
							}
						})
					} else {
						this.canClick = true
					}
				}, 300)
			},
			productConfirm(e) {
				this.productValue = e[0];
				this.getFeeCfgList();
			},
			//提交
			confirm() {
				let param = {
					productId: this.productValue.value,
					feeList: JSON.stringify(this.form),
				};
				if (this.type == "single") {
					param.startSn = this.singleInputValue;
					param.endSn = this.singleInputValue;
				} else if (this.type == "multiple") {
					param.startSn = this.multipleInputValueStart;
					param.endSn = this.multipleInputValueEnd;
				}
				this.$u.api.batchSetSnFee(param).then((res) => {
						if (res.status == 200) {
							this.$refs.uToast.show({
								title: "设置成功",
								type: "success",
							});
							setTimeout(() => {
								this.$u.route({
									url: "/pages/index/index",
									type: "switchTab",
								});
							}, 1500);
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: "error",
							});
						}
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast(res.resultDesc);
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},
		},
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.zcModifyMain {
		padding: 30rpx;

		.terminalBox {
			box-shadow: 0 0 10rpx rgb(230, 230, 230);
			padding: 30rpx;
			border-radius: 14rpx;
			margin-bottom: 26rpx;
			text-align: center;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.singleBox {
				font-family: "din-font";
				font-weight: bold;
				color: #010101;
				font-size: 50rpx;
				margin-top: 10rpx;

				text {
					color: #fb4535;
					margin-left: 10rpx;
				}
			}

			.multipleBox {
				font-family: "din-font";
				font-weight: bold;
				color: #010101;
				font-size: 50rpx;
				margin-top: 10rpx;

				>view {
					text {
						color: #fb4535;
						margin-left: 10rpx;
					}
				}

				.uIcon {
					display: block;
					margin: 0 auto;
					width: 50rpx;
				}
			}
		}

		.r_input {
			color: #fb4535;
			font-weight: bold;
		}

		.rButton {
			width: 80%;
			margin-top: 60rpx;
			background: #fb4535;
			height: 70rpx;
			line-height: 70rpx;
		}
	}
</style>
